<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <title>购物车</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .product-image {
      width: 50px;
      height: 50px;
      object-fit: cover;
    }

    .cart-title {
      text-align: center;
      margin-bottom: 20px;
    }

    .cart-footer {
      text-align: right;
      margin-top: 20px;
    }

    .cart-footer .total-price {
      font-size: 1.2rem;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="container" id="app">
    <!-- 购物车标题 -->
    <div class="cart-title">
      <h1>水果</h1>
      <p>SHUIGUO</p>
    </div>

    <!-- 购物车表格 -->
    <table class="table table-bordered  text-center">
      <thead>
        <tr>
          <th scope="col">选中</th>
          <th scope="col">名称</th>
          <th scope="col">单价</th>
          <th scope="col">个数</th>
          <th scope="col">小计</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody v-if="fruitList.length>0">


        <!-- 商品 1 -->
        <tr v-for="(fruit,index) in fruitList" :key="index">
          <td>
            <input type="checkbox" class="form-check-input" v-model="fruit.isSelect">
          </td>
          <td>{{fruit.name}}</td>
          <td>{{fruit.price}}</td>
          <td class="d-flex justify-content-center">
            <div class="d-flex align-items-center ">
              <button class="btn btn-outline-secondary btn-sm" @click="fruit.count--">-</button>
              <input type="text" class="form-control text-center mx-1" style="width: 50px;" v-model="fruit.count">
              <button class="btn btn-outline-secondary btn-sm" @click="fruit.count++">+</button>
            </div>
          </td>
          <td>{{calculateTrTotalPrice(fruit.price,fruit.count)}}</td>
          <td>
            <button class="btn btn-danger btn-sm" @click="fruitList.splice(index,1)">删除</button>
          </td>
        </tr>

      </tbody>

      <tbody v-else>
        <tr>
          <td>空空如也</td>
        </tr>
      </tbody>

    </table>

    <!-- 购物车底部 -->
    <div class="cart-footer">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="selectAll" v-model="IsAllSelect">
        <label class="form-check-label" for="selectAll">全选</label>
      </div>
      <p class="total-price">总价：¥<span id="total-price">{{totalPrice}}</span></p>
      <button class="btn btn-primary">结算（{{totalCount}}）</button>
    </div>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        fruitList: [
          {
            name: '火龙果',
            price: 6,
            count: 2,
            isSelect: false

          },
          {
            name: '草莓',
            price: 7,
            count: 1,
            isSelect: false

          },
          {
            name: '香蕉',
            price: 5,
            count: 3,
            isSelect: false

          },
          {
            name: '苹果',
            price: 8,
            count: 4,
            isSelect: true
          },
          {
            name: '橘子',
            price: 6,
            count: 2,
            isSelect: false
          }
        ]

      },
      methods: {
        // 计算总价
        calculateTrTotalPrice (price, count) {
          return price * count;
        }
      }, computed:
      {

        IsAllSelect: {
          get () {
            return this.fruitList.every(fruit => fruit.isSelect === true);
          },
          set (value) {
            this.fruitList.forEach(fruit => {
              fruit.isSelect = value;
            });
          }
        },
        totalPrice () {
          var total = 0;
          this.fruitList.forEach(element => {
            total += element.price * element.count;
          });
          return total;
        },
        totalCount () {
          var total = 0;
          this.fruitList.forEach(element => {
            total += element.isSelect === true ? 1 : 0;
          });
          return total;
        }
      }


    })
  </script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>